$(function() {
    $('.mybanner').on('mouseenter', function() { //
        $('.prev').show();
        $('.next').show();
        // clearInterval(timer);
    }).on('mouseleave', function() {
        $('.prev').hide();
        $('.next').hide();
        // clearInterval(timer);
    });

    var width = $('.mybanner').width();
    var i = 0;
    $('.hot').append($('.hot li').eq(0).clone(true));

    // 右箭头点击事件
    $('.hot').imgChange = function() {
        i++;
        $(this).css('transform', 'translatex(' + (-i * width) + 'px)').css('transition', 'all 0.5s');
        if (i == $(this).children().length - 1) {
            i = 0;
            setTimeout(function() {
                $(this).css('transform', 'translatex(0px)').css('transition', 'none');
            }, 500);
        }
        setCircle(i);
    };
    $next.on('click', $('.hot').imgChange);
    // 左箭头点击事件
    $('.hot').imgChange2 = function() {
        if (i == 0) {
            i = $(this).children().length - 1;
            $(this).css('transform', 'translatex(' + ($(this).children().length + 1) * width + 'px)').css('transition', 'none');
        }
        i--;
        setTimeout(function() {
            $(this).css('transform', 'translatex(' + (-i * width) + 'px)').css('transition', 'all 0.5s');
        }, 0);
        setCircle(i);
    };

    $prev.on('click', $('.hot').imgChange2);
    // 自动轮播
    var t = setInterval($('.hot').imgChange, 2000); //
    $('.mybanner').on('mouseenter', function() {
        clearInterval(t);
    }).on('mouseleave', function() {
        t = setInterval($('.hot').imgChange, 2000);
    });

    // 小圆点点击事件
    var setCircle = function(i) {
        $('.circle').removeClass('active');
        $('.circle[data-n="' + i + '"]').addClass('active');
    };

    $('.circle-list').on('click', 'li', function(e) {
        if (e.target.nodeName == 'LI') {
            i = Number($(e.target).attr('data-n'));
            $(".hot").css('transform', 'translatex(' + (-i * width) + 'px)').css('transition', 'all 0.5s');
            setCircle(i);
        }
    });

})